import {CloseCircleOutlined} from '@ant-design/icons';
import type {ProColumnType} from '@ant-design/pro-components';
import {
    EditableProTable,
    FooterToolbar,
    PageContainer,
    ProForm,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    ProFormTimePicker,
    ProFormDigit,
} from '@ant-design/pro-components';
import {Card, Col, message, Popover, Row} from 'antd';
import type {FC} from 'react';
import {useState} from 'react';
import {skuAdd} from './service';
import useStyles from './style.style';
import {useNavigate} from 'react-router-dom';

interface TableFormDateType {
    key: string;
    workId?: string;
    name?: string;
    department?: string;
    isNew?: boolean;
    editable?: boolean;
}

type InternalNamePath = (string | number)[];
const fieldLabels = {
    skuName: '规格名称',
    description: '规格描述',

    cpu: 'CPU信息',
    gpu: 'GPU',
    gpuConn: '连接方式',
    gpuStorageSize: '显存大小',
    storageType: '存储类型',
    storageSize: '存储大小',
    networking: '组网方式',

    brand: '品牌',
    busInterface: '总线接口'
};
const tableData = [];

interface ErrorField {
    name: InternalNamePath;
    errors: string[];
}

const SkuAddForm: FC<Record<string, any>> = () => {
    const navigate = useNavigate();
    const {styles} = useStyles();
    const [error, setError] = useState<ErrorField[]>([]);
    const getErrorInfo = (errors: ErrorField[]) => {
        const errorCount = errors.filter((item) => item.errors.length > 0).length;
        if (!errors || errorCount === 0) {
            return null;
        }
        const scrollToField = (fieldKey: string) => {
            const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
            if (labelNode) {
                labelNode.scrollIntoView(true);
            }
        };
        const errorList = errors.map((err) => {
            if (!err || err.errors.length === 0) {
                return null;
            }
            const key = err.name[0] as 'name' | 'url' | 'owner' | 'approver' | 'dateRange' | 'type';
            return (
                <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
                    <CloseCircleOutlined className={styles.errorIcon}/>
                    <div className={styles.errorMessage}>{err.errors[0]}</div>
                    <div className={styles.errorField}>{fieldLabels[key]}</div>
                </li>
            );
        });
        return (
            <span className={styles.errorIcon}>
        <Popover
            title="表单校验信息"
            content={errorList}
            overlayClassName={styles.errorPopover}
            trigger="click"
            getPopupContainer={(trigger: HTMLElement) => {
                if (trigger && trigger.parentNode) {
                    return trigger.parentNode as HTMLElement;
                }
                return trigger;
            }}
        >
          <CloseCircleOutlined/>
        </Popover>
                {errorCount}
      </span>
        );
    };
    const onFinish = async (values: Record<string, any>) => {
        setError([]);
        try {
            await skuAdd(values);
            message.success('提交成功');
            navigate('/power/sku-list');
        } catch {
            // console.log
        }
    };
    const onFinishFailed = (errorInfo: any) => {
        setError(errorInfo.errorFields);
    };
    const columns: ProColumnType<TableFormDateType>[] = [
        {
            title: '属性名称',
            dataIndex: 'comment',
            key: 'comment',
            width: '20%',
        },
        {
            title: '属性值',
            dataIndex: 'value',
            key: 'value',
            width: '40%',
        },
        {
            title: '操作',
            key: 'action',
            valueType: 'option',
            render: (_, record: TableFormDateType, index, action) => {
                return [
                    <a
                        key="eidit"
                        onClick={() => {
                            action?.startEditable(record.key);
                        }}
                    >
                        编辑
                    </a>,
                ];
            },
        },
    ];
    return (
        <ProForm
            layout="vertical"
            submitter={{
                render: (props, dom) => {
                    return (
                        <FooterToolbar>
                            {getErrorInfo(error)}
                            {dom}
                        </FooterToolbar>
                    );
                },
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
            <PageContainer>
                <Card title="基础信息" className={styles.card} bordered={false}>
                    <Row>
                        <Col lg={6} md={12} sm={24}>
                            <ProFormText
                                label={fieldLabels.skuName}
                                name="skuName"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入规格名称',
                                    },
                                ]}
                                placeholder="请输入规格名称"
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col lg={12} md={12} sm={6}>
                            <ProFormTextArea
                                label={fieldLabels.description}
                                name="description"
                                placeholder="请输入规格描述"
                            />
                        </Col>
                    </Row>
                </Card>
                <Card title="规格属性" className={styles.card} bordered={false}>
                    <Row gutter={16}>
                        <Col lg={7} md={12} sm={24}>
                            <ProFormText
                                label={fieldLabels.brand}
                                name="brand"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入品牌信息',
                                    },
                                ]}
                                placeholder="请输入品牌信息"
                            />
                        </Col>
                        <Col xl={{span: 6, offset: 2,}} lg={{span: 8,}} md={{span: 12,}} sm={24}>
                            <ProFormDigit
                                label="总算力"
                                name="hashrate"
                                rules={[
                                    {
                                        required: true,
                                        message: '总算力',
                                    },
                                ]}
                                fieldProps={{addonAfter: "P"}}
                                placeholder="请输入规格算力信息"
                            />
                        </Col>
                        <Col xl={{span: 6, offset: 2,}} lg={{span: 6,}} md={{span: 24,}} sm={24}>
                            <ProFormText
                                label={fieldLabels.cpu}
                                name="cpu"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入cpu信息',
                                    },
                                ]}
                                placeholder="请输入cpu信息"
                            />
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col lg={7} md={12} sm={24}>
                            <ProFormText
                                label={fieldLabels.gpu}
                                name="gpu"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入gpu信息',
                                    },
                                ]}
                                placeholder="请输入gpu信息, 示例: 4*V100"
                            />
                        </Col>
                        <Col xl={{span: 6, offset: 2,}} lg={{span: 8,}} md={{span: 12,}} sm={24}>
                            <ProFormDigit
                                label={fieldLabels.gpuStorageSize}
                                name="gpuStorageSize"
                                rules={[
                                    {
                                        required: true,
                                        message: '显存大小',
                                    },
                                ]}
                                fieldProps={{addonAfter: "GB"}}
                                placeholder="请输入gpu 显存信息"
                            />
                        </Col>
                        <Col xl={{span: 6, offset: 2,}} lg={{span: 6,}} md={{span: 24,}} sm={24}>
                            <ProFormText
                                label={fieldLabels.gpuConn}
                                name="gpuConn"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入连接方式',
                                    },
                                ]}
                                placeholder="请输入连接方式"
                            />
                        </Col>

                    </Row>
                    <Row gutter={16}>
                        <Col lg={7} md={12} sm={24}>
                            <ProFormText
                                label={fieldLabels.storageType}
                                name="storageType"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入存储类型',
                                    },
                                ]}
                                placeholder="请输入存储类型"
                            />
                        </Col>
                        <Col xl={{span: 6, offset: 2,}} lg={{span: 8,}} md={{span: 12,}} sm={24}>
                            <ProFormDigit
                                label={fieldLabels.storageSize}
                                name="storageSize"
                                rules={[
                                    {
                                        required: true,
                                        message: '存储大小',
                                    },
                                ]}
                                fieldProps={{addonAfter: "GB"}}
                                placeholder="请输入存储大小信息"
                            />
                        </Col>
                        <Col xl={{span: 6, offset: 2,}} lg={{span: 6,}} md={{span: 24,}} sm={24}>
                            <ProFormText
                                label={fieldLabels.busInterface}
                                name="busInterface"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入总线接口信息',
                                    },
                                ]}
                                placeholder="请输入总线接口信息"
                            />
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col lg={7} md={12} sm={24}>
                            <ProFormText
                                label={fieldLabels.networking}
                                name="networking"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入组网方式',
                                    },
                                ]}
                                placeholder="请输入组网方式"
                            />
                        </Col>
                        <Col xl={{span: 6, offset: 2,}} lg={{span: 8,}} md={{span: 12,}} sm={24}>

                        </Col>
                        <Col xl={{span: 6, offset: 2,}} lg={{span: 6,}} md={{span: 24,}} sm={24}>

                        </Col>
                    </Row>
                </Card>
                <Card title="补充属性" bordered={false}>
                    <ProForm.Item name="ext">
                        <EditableProTable<TableFormDateType>
                            recordCreatorProps={{
                                record: () => {
                                    return {
                                        key: `0${Date.now()}`,
                                    };
                                },
                            }}
                            columns={columns}
                            rowKey="key"
                        />
                    </ProForm.Item>
                </Card>
            </PageContainer>
        </ProForm>
    );
};
export default SkuAddForm;
